
import React  from "react";
import {PickerView,Drawer} from 'antd-mobile'
import axios from '../../../utils/axios.js'
import './filter.scss'

let selectBox=[{ id:'area', name:'区域'},{ id:'type', name:'方式'},{ id:'price', name:'租金'},{ id:'select', name:'筛选'}]
export default class Flter extends React.Component{
    constructor(){
        super()
        this.state={
            selectType:{
                area:[],
                type:[],
                price:[],
                select:{sf:[],so:[],sr:[],sc:[]},
            },
            openType:'',
            filterData:{},
        }
        this.unSelect=[]
        this.barUnCkeck={}
    }

    componentDidMount(){
       this.getFiterMenu()
    }
    getFiterMenu=async ()=>{
        let {value}=JSON.parse(localStorage.getItem('local_city'))
        let res=await axios.get(`/houses/condition?id=${value}`)
        this.setState({
            filterData:res.data.body
        })
    }
    checkType=(type)=>{
      this.setState({
        openType:type
      })
    }
    renderFilter=()=>{
       let {openType,filterData,selectType}=this.state
       
       if(!openType) return ''
       console.log(filterData,'***--',openType,)
       let data=[]
       let cols=1
       let value=[]
       let {area,subway,rentType,price}=filterData
       switch(openType){
           case 'area':
               data=[area,subway] ;
               cols=3;
               value=selectType.area;
               break;
           case 'type':
                data=rentType ;
                cols=1;
                value=selectType.type;
                break;
           case 'price':
                data=price ;
                cols=1;
                value=selectType.price;
                break;
           case 'select':
            return this.renderSelect()
                
           default:break;
       }
        return <div className="pick-div">
                <PickerView
                    onChange={this.selectItemChange}
                    value={value}
                    data={data}
                    cols={cols}
                    className='pick-div'
                >
                </PickerView>
                <div className="filter-foot">
                        <div className="cancel" onClick={e=>this.setState({openType:""})}>取消</div>
                        <div className="ok" onClick={e=>this.selectItemChange(value,true)}>确定</div>
                </div>
           </div>
        
        
    }
    sibarCancel=()=>{
        this.barUnCkeck={}
        this.setState({
            openType:""
        })
    }
    sibarOk=()=>{
        this.setState({
            openType:"",
            selectType:{
                ...this.state.selectType,
                select:this.barUnCkeck
            }
        },()=>{
            this.barUnCkeck={}
            this.props.changeItem(this.state.selectType)
        })
    }
    barCheck=(type,value)=>{
       let index=this.barUnCkeck[type].indexOf(value)
       if(index>-1){
        this.barUnCkeck[type].splice(index,1)
       }else{
        this.barUnCkeck[type].push(value)
       }
       this.forceUpdate()
    }
    renderSelect=()=>{
        let {openType,filterData,selectType}=this.state
        let {floor,oriented,roomType,characteristic}=filterData
        if(Object.keys(this.barUnCkeck).length===0){
            this.barUnCkeck=JSON.parse(JSON.stringify(selectType.select))
        }
        let {sf,so,sr,sc}=this.barUnCkeck
        let sidebar=(<div className='select-bar' ref='bar'>
              <div className="bar-main">
                 <div className='bar-list'>
                    <div className="bar-title">户型</div>
                    <div className="bar-content">
                        {roomType.map(item=>{
                            let active=sr.includes(item.value)?'active':''
                            return <span className={ `con-item ${active}`} key={item.value} onClick={()=>this.barCheck('sr',item.value)}>{item.label}</span>
                        })}
                    </div>
                 </div>
                 <div className='bar-list'>
                    <div className="bar-title">朝向</div>
                    <div className="bar-content">
                        {oriented.map(item=>{
                            let active=so.includes(item.value)?'active':''
                            return <span className={ `con-item ${active}`} key={item.value} onClick={()=>this.barCheck('so',item.value)}>{item.label}</span>
                        })}
                    </div>
                 </div>
                 <div className='bar-list'>
                    <div className="bar-title">楼层</div>
                    <div className="bar-content">
                        {floor.map(item=>{
                            let active=sf.includes(item.value)?'active':''
                            return <span className={ `con-item ${active}`} key={item.value} onClick={()=>this.barCheck('sf',item.value)}>{item.label}</span>
                        })}
                    </div>
                 </div>
                 <div className='bar-list'>
                    <div className="bar-title">房屋特点</div>
                    <div className="bar-content">
                        {characteristic.map(item=>{
                            let active=sc.includes(item.value)?'active':''
                            return <span className={ `con-item ${active}`} key={item.value} onClick={()=>this.barCheck('sc',item.value)}>{item.label}</span>
                        })}
                    </div>
                 </div>
              </div>
              <div className="filter-foot">
                    <div className="cancel" onClick={()=>this.sibarCancel()}>取消</div>
                    <div className="ok" onClick={()=>this.sibarOk()}>确定</div>
              </div>
            </div>
        )
        return <Drawer
            position={'right'}
            className="my-drawer"
            style={{ minHeight: '100vh' }}
            contentStyle={{ color: '#A6A6A6', textAlign: 'center', paddingTop: 42 }}
            sidebarStyle={{ border: '1px solid #ddd' }}
            sidebar={sidebar}
            open={openType==='select'}
        >
           1234
        </Drawer>
    }
    selectItemChange=(value,flag)=>{
        let {selectType,openType}=this.state
        
        if(flag){
            this.setState({
                selectType:{
                    ...selectType,
                    [openType]:this.unSelect
                },
                openType:''
            },()=>{
                this.unSelect=[]
                this.props.changeItem(this.state.selectType)
            })
            
           
        }else{
            this.unSelect=value
        }
    }
    render(){
        let {selectType,openType}=this.state
        return <div className='find-stick'>
                <div className='stick-div'>
                    {selectBox.map(item=>{
                        let active=((selectType[item.id].length>0&&selectType[item.id][0]!=='null')||openType===item.id)?'active':''
                        return <div key={item.id} className={`st-div ${active}`} onClick={e=>this.checkType(item.id)}>
                            <span >{item.name}</span>
                            <i className='iconfont icon-arrow'></i>
                        </div>
                    })}
                </div>
                {/* <div className="pick-div"> */}
                   {this.renderFilter()}
                {/* </div> */}
                
           </div>
    }
}